<HTML>
<HEAD>
	<TITLE>JavaScript Toolbox - Dynamic Option List</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="tmp/DynamicOptionList.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">


var arrItems1 = new Array();
var arrItemsGrp1 = new Array();

arrItems1[3] = "class1";
arrItemsGrp1[3] = 1;
arrItems1[4] = "class2";
arrItemsGrp1[4] = 1;
arrItems1[5] = "class3";
arrItemsGrp1[5] = 1;

arrItems1[6] = "class4";
arrItemsGrp1[6] = 2;
arrItems1[7] = "class5";
arrItemsGrp1[7] = 2;

arrItems1[0] = "class6";
arrItemsGrp1[0] = 3;
arrItems1[1] = "class7";
arrItemsGrp1[1] = 3;
arrItems1[2] = "class8";
arrItemsGrp1[2] = 3;




function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
  var myEle ;
  var x,i,tmp ;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
  //if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
   // for (var q=form.E.options.length;q>=0;q--) form.E.options[q] = null;
  //}
  // ADD Default Choice - in case there are no values
  
  
  /* myEle=document.createElement("option");
  theText=document.createTextNode("[SELECT]");
  myEle.appendChild(theText);
  myEle.setAttribute("value","-1");
  controlToPopulate.appendChild(myEle); */
  
  
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for (var q=window.document.forms['mainform'].elements['E'].options.length;q>=0;q--) window.document.forms['mainform'].elements['E'].options[q]=null;  
    // Empty the third drop down box of any choices
  for (var q=window.document.forms['mainform'].elements['F'].options.length;q>=0;q--) window.document.forms['mainform'].elements['F'].options[q] = null;
  
  i=0;
  for ( x = 0 ; x < ItemArray.length  ; x++ ) {
    
    
    if ( GroupArray[x] == control.value ) {
      //myEle = document.createElement("option") ;
      //myEle.value = x ;
      //myEle.setAttribute("value",x);
      // myEle.text = ItemArray[x] ;
     // var txt = document.createTextNode(ItemArray[x]);
     // myEle.appendChild(txt);
      // controlToPopulate.add(myEle) ;
      controlToPopulate.options[i] = new Option(ItemArray[x]);
    controlToPopulate.options[i].text = ItemArray[x];
    controlToPopulate.options[i].value = ItemArray[x];// without this, IE not working
    i++;
      
    }
    
  } 
  
    tmp =control.options[control.value].text;
    alert(tmp);
    
}











var listB = new DynamicOptionList("B","A");
/*listB.addOptions("West","California","California","Washington","Washington");
listB.addOptions("Midwest","Iowa","Iowa","Illinois","Illinois");
listB.addOptions("East","New York","New York","Florida","Florida");
//listB.setDefaultOption("West","California");
//listB.setDefaultOption("Midwest","Iowa");
//listB.setDefaultOption("East","Florida"); 

var listC = new DynamicOptionList("C","A","B");
listC.addOptions("West|California","Los Angeles","Los Angeles","San Diego","San Diego");
listC.addOptions("West|Washington","Redmond","Redmond","Seattle","Seattle");
listC.addOptions("Midwest|Iowa","Davenport","Davenport","Des Moines","Des Moines");
listC.addOptions("Midwest|Illinois","Chicago","Chicago","Moline","Moline");
listC.addOptions("East|New York","New York","New York","Albany","Albany");
listC.addOptions("East|Florida","Talahassee","Talahassee","Orlando","Orlando"); */

var listE = new DynamicOptionList("E","D");
listE.addOptions("class1","or.1","or.1","or.2","or.2","or.3","or.3");
listE.addOptions("class2","or.4","or.4","or.5","or.5");
listE.addOptions("class3","or.6","or.6","or.7","or.7");
//listE.setDefaultOption("West","California");
//listE.setDefaultOption("Midwest","Iowa");
//listE.setDefaultOption("East","Florida");

var listF = new DynamicOptionList("F","D","E");
listF.addOptions("class1|or.1","genera1","genera1","genera2","genera2");
listF.addOptions("class1|or.2","genera3","genera3","genera4","genera4");
listF.addOptions("class1|or.3","genera5","genera5","genera6","genera6");
listF.addOptions("class2|or.4","genera7","genera7","genera8","genera8");
listF.addOptions("class2|or.5","genera9","genera9","genera10","genera10");
listF.addOptions("class3|or.6","genera11","genera11","genera12","genera12");
listF.addOptions("class3|or.7","genera13","genera13","genera14","genera14");

function init() {
	var theform = document.forms[0];
	//listB.init(theform);
	//listC.init(theform);
	listE.init(theform);
	listF.init(theform);
	}
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF LINK="#00615F" VLINK="#00615F" ALINK="#00615F" onLoad="init()">


<FORM name="mainform" ACTION="" METHOD="">

<!-- <TABLE BORDER="1">


<TR>
	<TD>
		<SELECT NAME="A" onChange="listB.populate();listC.populate();">
			<OPTION VALUE="West">West
			<OPTION VALUE="Midwest">Midwest
			<OPTION VALUE="East">East
		</SELECT>

	</TD>
	<TD>
		<SELECT NAME="B" onChange="listC.populate();">
			<SCRIPT LANGUAGE="JavaScript">listB.printOptions()</SCRIPT>
		</SELECT>
	</TD>
	<TD>
		<SELECT NAME="C">

			<SCRIPT LANGUAGE="JavaScript">listC.printOptions()</SCRIPT>
		</SELECT>
	</TD>
</TR>
</TABLE> -->

<BR><BR>


<select name="Make" onchange="selectChange(this, window.document.forms['mainform'].elements['D'], arrItems1, arrItemsGrp1);">



<option value="-1">Select Team
<option value="1">Phy.1
<option value="2">Phy.2
<option value="3">Phy.3
<option value="4">Phy.4
</select>


<br><B>Multiple Select:</B><BR>
<TABLE BORDER="1">
<TR>
	<TH>Class</TH>

	<TH>Order</TH>
	<TH>Genus</TH>
</TR>
<TR>
	<TD>
		<SELECT NAME="D" multiple size=5 onChange="listE.populate();listF.populate();">
			<!-- <OPTION VALUE="class1">class1
			<OPTION VALUE="class2">class2
			<OPTION VALUE="class3">class3 -->
		</SELECT>

	</TD>
	<TD>
		<SELECT NAME="E" multiple size=5 onChange="listF.populate();">
			<SCRIPT LANGUAGE="JavaScript">listE.printOptions()</SCRIPT>
		</SELECT>
	</TD>
	<TD>
		<SELECT NAME="F" multiple size=5 onChange="alert('hello');">

			<SCRIPT LANGUAGE="JavaScript">listF.printOptions()</SCRIPT>
		</SELECT>
	</TD>
</TR>
</TABLE>


</BODY>
</HTML>
